<template>
  <view v-if="visible" class="map-modal">
    <view class="modal-overlay" @click="$emit('close')"></view>
    <view class="map-modal-content">
      <view class="map-modal-header">
        <text class="modal-title">🗺️ 荒岛地图</text>
        <button class="close-btn" @click="$emit('close')">×</button>
        <view class="exploration-info">
          <text class="info-item">当前精力: {{ energy }}</text>
          <text class="info-item">当前位置: {{ currentLocationName }}</text>
        </view>
      </view>
      <view class="map-container">
        <!-- 调试信息 -->
        <view v-if="mapTiles.length === 0" style="color: #fff; text-align: center; padding: 20rpx;">
          地图加载中...
        </view>
        <view class="map-grid-3x3" v-else>
          <view
            class="map-card"
            v-for="(tile, index) in mapTiles"
            :key="index"
            :class="{
              'discovered': tile.discovered,
              'explored': tile.explored,
              'current': tile.id === currentLocationId,
              'flipping': tile.flipping,
              'switching': tile.switching,
              'insufficient-energy': !tile.discovered && energy < tile.exploreCost
            }"
            @click="$emit('explore', tile)"
          >
            <!-- 未发现状态 -->
            <view class="card-front" v-if="!tile.discovered">
              <text class="question-mark">?</text>
              <text class="explore-cost">消耗精力: {{ tile.exploreCost || 20 }}</text>
            </view>
            
            <!-- 已发现状态 -->
            <view class="card-back" v-if="tile.discovered">
              <text class="tile-icon">{{ tile.icon }}</text>
              <text class="tile-name">{{ tile.name }}</text>
              <text class="tile-status">{{ tile.explored ? '已探索' : '已发现' }}</text>
            </view>
            
            <!-- 当前位置标记 -->
            <view v-if="tile.id === currentLocationId" class="current-marker">
              <view class="marker-icon">📍</view>
              <view class="marker-text">当前位置</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MapModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    mapTiles: {
      type: Array,
      default: () => []
    },
    currentLocationId: {
      type: String,
      default: ''
    },
    energy: {
      type: Number,
      default: 0
    }
  },
  computed: {
    currentLocationName() {
      const location = this.mapTiles.find(tile => tile.id === this.currentLocationId)
      return location ? location.name : '未知'
    }
  }
}
</script>

<style scoped>
/* 弹窗样式 */
.map-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5rpx);
}

.map-modal-content {
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 20rpx;
  margin: 40rpx;
  width: calc(100% - 80rpx);
  height: calc(100% - 80rpx);
  max-width: 600rpx;
  max-height: 800rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}

.map-modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #f8fafc;
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 8rpx 16rpx;
  font-size: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.exploration-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}

.info-item {
  font-size: 24rpx;
  color: #94a3b8;
  line-height: 1.4;
}

/* 地图容器样式 */
.map-container {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
}

.map-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rpx;
  padding: 15rpx;
  max-width: 500rpx;
  width: 100%;
  justify-items: center;
  align-items: center;
}

.map-card {
  width: 140rpx;
  height: 140rpx;
  position: relative;
  border-radius: 16rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.map-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
}

.map-card.discovered {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2rpx solid #475569;
}

.map-card.explored {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  border: 2rpx solid #10b981;
}

.map-card.current {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  border: 2rpx solid #3b82f6;
  box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.4);
}

.map-card.flipping {
  animation: flipCard 0.6s ease-in-out;
}

.map-card.switching {
  transform: scale(1.1);
  animation: switchLocation 0.6s ease-in-out;
}

.map-card.insufficient-energy .card-front {
  opacity: 0.4;
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  border-color: rgba(239, 68, 68, 0.5);
  position: relative;
}

.map-card.insufficient-energy .card-front::after {
  content: '精力不足';
  position: absolute;
  bottom: 4rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10rpx;
  color: #ef4444;
  background: rgba(0, 0, 0, 0.7);
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  white-space: nowrap;
}

.map-card.insufficient-energy .question-mark {
  color: #ef4444;
  opacity: 0.6;
}

.map-card.insufficient-energy .explore-cost {
  color: #ef4444;
  font-weight: bold;
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rpx;
  text-align: center;
  box-sizing: border-box;
  border-radius: 16rpx;
}

.card-front {
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.card-back {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border: 2rpx solid #475569;
}

.map-card.current .card-back {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.5);
  animation: currentLocationPulse 2s ease-in-out infinite;
}

.map-card.current .tile-icon {
  animation: currentIconGlow 2s ease-in-out infinite;
}

.map-card.current .tile-name {
  color: #667eea;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(102, 126, 234, 0.3);
}

.map-card.current .tile-status {
  color: #667eea;
  font-weight: bold;
  background: rgba(102, 126, 234, 0.2);
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  border: 1rpx solid rgba(102, 126, 234, 0.3);
}

.question-mark {
  font-size: 36rpx;
  color: #e5e7eb;
  font-weight: bold;
  margin-bottom: 6rpx;
  line-height: 1;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.explore-cost {
  font-size: 14rpx;
  color: #94a3b8;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.tile-icon {
  font-size: 28rpx;
  margin-bottom: 6rpx;
  line-height: 1;
}

.tile-name {
  font-size: 16rpx;
  color: #f8fafc;
  font-weight: bold;
  margin-bottom: 3rpx;
  line-height: 1.2;
  text-align: center;
}

.tile-status {
  font-size: 12rpx;
  color: #10b981;
  line-height: 1.2;
  text-align: center;
  margin: 0;
  padding: 0;
}

.current-marker {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12rpx;
  padding: 4rpx 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rpx;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  animation: currentMarkerPulse 2s ease-in-out infinite;
  z-index: 10;
}

.marker-icon {
  font-size: 16rpx;
  animation: markerIconBounce 1.5s ease-in-out infinite;
}

.marker-text {
  font-size: 10rpx;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  line-height: 1;
}

/* 动画效果 */
@keyframes flipCard {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes switchLocation {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(102, 126, 234, 0); }
  25% { transform: scale(1.15); box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4); }
  50% { transform: scale(1.1); box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.6); }
  75% { transform: scale(1.05); box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4); }
  100% { transform: scale(1.05); box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3); }
}

@keyframes currentLocationPulse {
  0%, 100% { box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.5); transform: scale(1); }
  50% { box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.8); transform: scale(1.02); }
}

@keyframes currentIconGlow {
  0%, 100% { filter: drop-shadow(0 0 8rpx rgba(102, 126, 234, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 16rpx rgba(102, 126, 234, 0.8)); transform: scale(1.1); }
}

@keyframes currentMarkerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4); }
  50% { transform: scale(1.1); box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.6); }
}

@keyframes markerIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2rpx); }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .map-card {
    width: 120rpx;
    height: 120rpx;
  }
  
  .tile-icon {
    font-size: 24rpx;
  }
  
  .tile-name {
    font-size: 14rpx;
  }
  
  .tile-status {
    font-size: 10rpx;
  }
  
  .question-mark {
    font-size: 32rpx;
  }
  
  .explore-cost {
    font-size: 12rpx;
  }
  
  .current-marker {
    top: -6rpx;
    right: -6rpx;
    padding: 3rpx 6rpx;
  }
  
  .marker-icon {
    font-size: 14rpx;
  }
  
  .marker-text {
    font-size: 9rpx;
  }
}

@media screen and (max-width: 600rpx) {
  .map-card {
    width: 100rpx;
    height: 100rpx;
  }
  
  .tile-icon {
    font-size: 20rpx;
  }
  
  .tile-name {
    font-size: 12rpx;
  }
  
  .tile-status {
    font-size: 9rpx;
  }
  
  .question-mark {
    font-size: 28rpx;
  }
  
  .explore-cost {
    font-size: 10rpx;
  }
  
  .current-marker {
    top: -6rpx;
    right: -6rpx;
    padding: 3rpx 6rpx;
  }
  
  .marker-icon {
    font-size: 12rpx;
  }
  
  .marker-text {
    font-size: 8rpx;
  }
}
</style>
